<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main">
      <p class="title">
        情报数据概况： <countTo :startVal="0" :endVal="totalNum || 0" :duration="5000" /> 条
      </p>
      <div class="itemBox">
        <p v-for="(item, i) in initialDatas" :key="i">
          <img :src="item.ico" :alt="item.name" />
          <span class="sBox">
            <span class="s1">{{ item.name }}</span>
            <countTo class="s2" :startVal="0" :endVal="item.num || 0" :duration="5000" />
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    countTo,
    chartTitle,
  },
  name: 'card',
  props: {
    title: String,
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      totalNum: 0,
      initialDatas: [
        { name: '淘宝', key: 'tbNumDto', num: 0, ico: require('./image/t1.png') },
        { name: '闲鱼', key: 'xyNumDto', num: 0, ico: require('./image/t2.png') },
        { name: '微博', key: 'wbNumDto', num: 0, ico: require('./image/t3.png') },
        { name: '贴吧', key: 'tiebaNumDto', num: 0, ico: require('./image/t4.png') },
        { name: '朋友圈', key: 'pyqNumDto', num: 0, ico: require('./image/t5.png') },
        { name: '其他', key: 'otherNumDto', num: 0, ico: require('./image/t6.png') }
      ]
    }
  },
  watch: {
    data: function (res) {
      if(res && res.length>0) {
        for(let item of res) {
          let obj = this.initialDatas.find(obj=> {return obj.key === item.key})
          if(obj && Object.keys(obj).length>0 && item.num) {
            obj.num = item.num?item.num: 0
          }
        }
        // 计算总数
        this.totalNum = this.countTotal(res, 'num')
      }
    },
  },
  methods: {
    //计算对象数组中某个属性合计
    countTotal(arr, keyName) {
      let $total = 0;
      $total = arr.reduce(function (total, currentValue, currentIndex, arr){
          return currentValue[keyName] ? (total + currentValue[keyName]) : total;
      }, 0);
      return $total;
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  width: 100%;
  height: 30.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, 0.2);
  display: flex;
  flex-flow: column;

  .main {
    width: 92%;
    height: 5vh;
    margin: 0 auto;
    margin-top: 2vh;
    .title {
      width: 96%;
      text-align: center;
      margin-top: 0.5vh;
      margin-bottom: 0.5vh;
      margin-left: 2.5%;
      font-family: 'MicrosoftYaHei';
      background-image: url(image/titleBg.png);
      background-size: 100% 100%;
      font-size: 1.5vh;
      span {
        color: #00cbff;
        font-size: 2.6vh;
        font-family: 'pang';
      }
    }
    .itemBox {
      overflow: hidden;
      margin-left: 1vh;
      p {
        width: 45%;
        float: left;
        margin-bottom: 0.5vh;
        &:nth-of-type(2n) {
          margin-left: 2vh
        }
        img {
          width: 5.5vh;
        }
        .sBox {
          border-bottom: 1px solid rgba(0, 230, 255, 0.4);
          padding-bottom: 1vh;
          .s1 {
            margin-left: 1vh;
            font-family: 'MicrosoftYaHei';
            font-size: 1vh;
          }
          .s2 {
            margin-left: 1vh;
            color: #00cbff;
            font-size: 2.2vh;
            position: relative;
            top: 0.3vh;
            font-family: 'MicrosoftYaHei';
          }
        }
      }
    }
  }
}
</style>
